<template>
  <div>
    <div class="haoWu"><router-link to="/home"><img :src="imgUrl" alt="" /></router-link><span>好物推荐</span></div>
    <ul class="boxOne">
      <li v-for="(item, index) in ziList" :key="index">{{ item.name }}</li>
    </ul>
    <ul class="boxTo">
      <li v-for="(item,index) in  tuList" :key="index">
        <img v-lazy="item.numberfo" alt="" />
        <span>{{item.name}}</span>
        <a href="" class="moneryOne">￥{{item.number}}</a><a href="" class="moneryTo">{{item.numberto}}</a>
      </li>
    </ul>


    <!-- <div v-lazy-container="{ selector: 'img', error: 'logo.png', loading: 'logo.png' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>  -->

<!-- <div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: "../../../static/images/cart/cart02.png",
      ziList: [
        { name: "推荐" },
        { name: "家装" },
        { name: "图书" },
        { name: "车品" },
        { name: "食品" },
        { name: "生鲜" },
      ],
      tuList: [
        {
          imgUrlto: "../../../static/images/goodthimg/tj08.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325",
          name:"",
          number:"",
          numberto:"",
        },
        {
          imgUrlto: "../../../static/images/goodthimg/tj12.jpg",
          mingzi:"女士短外套初春季2021年新款秋百搭小个子牛仔风衣粉色ins潮薄夏",
          moneOne:"￥168",
          moneTo:"￥225"
        },
        {
          imgUrlto: "../../../static/images/goodthimg/tj06.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        },
        {
          imgUrlto: "../../../static/images/goodthimg/tj07.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        },
        {
          imgUrlto: "../../../static/images/goodthimg/tj08.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
        ,
        {
          imgUrlto: "../../../static/images/goodthimg/tj09.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
        ,
        {
          imgUrlto: "../../../static/images/goodthimg/tj09.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
        ,
        {
          imgUrlto: "../../../static/images/goodthimg/tj09.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
        ,
        {
          imgUrlto: "../../../static/images/goodthimg/tj09.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
        ,
        {
          imgUrlto: "../../../static/images/goodthimg/tj09.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
        ,
        {
          imgUrlto: "../../../static/images/goodthimg/tj09.jpg",
          mingzi:"高倍防晒力 美白亦养护测试",
          moneOne:"￥205",
          moneTo:"￥325"
        }
      ],
      //  ziList:[],
    };
  },
  mounted() {
          this.$axios.get("/getusers").then(
                res=>{
                    // console.log("res:",res.data.userlist[2].id);
                  this.tuList= res.data.userlist
                  // console.log(this.tuList);
                
                }
            )
            
        }
};
</script>

<style lang="less" scoped>
.haoWu {
  display: flex;
  margin-top: 10px;
  height: 90px;
//   border: 1px solid red;
  img {
    margin-top: 26px;
    margin-left: 40px;
    height: 45px;
    transform: rotate(180deg);
    // border: 1px solid green;
  }
  span {
    margin-left: 30px;
    font-size: 42px;
    line-height: 95px;
  }
}
.boxOne {
  margin-top: 20px;
  display: flex;
  border-bottom: 1px solid rgb(214, 210, 210);
  li {
    margin-left: 4px;
    width: 120px;
    height: 80px;
    line-height: 80px;
    font-size: 38px;
    // margin-bottom: 10px;
    // border: 1px solid red;
  }
}
.boxTo {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
  border-top: 1px solid rgb(214, 210, 210);
  li {
      position: relative;
    margin-left: 15px;
    margin-top: 20px;
    width: 350px;
    height: 500px;
    border-radius: 20px 20px 0px 0px;
    border: 1px solid rgb(219, 221, 223);
    img {
      width: 100%;
      height: 350px;

      border-radius: 15px 15px 0px 0px;
    }
    span {
    //   display: inline-block;
    position: absolute;
      width: 95%;
      left: 20px;
      overflow: hidden;
         bottom: 90px;
      text-overflow: ellipsis;

      white-space: nowrap;
      font-size: 30px;

    //   border: 1px solid red;
    }
    .moneryOne{
       position:absolute;
       left: 20px;
       
       bottom: 37px;
        font-size: 34px;
        color: red;
        // border: 1px solid red;
    }
    .moneryTo{
         position:absolute;
         bottom: 38px;
        left: 130px;
        font-size: 30px;
        color: gray;
        text-decoration:line-through;
        // border: 1px solid red;
    }
  }
}
</style>